<template>
  <div>
    <div class="badge" v-show="visible">
      <span class="label">{{$t('public.searchBadge')}}</span>
      <span class="badge_info" v-for="badge in badges" :title="badge">{{badge}}</span>
      <span class="el-icon-close" @click="removeBadge"></span>
    </div>
    <div class="badge_remark" v-show="remark">{{$t('business.partakeAgentMsg')}}</div>
  </div>

</template>
<script>
    export default {
      name: 'AdvSchBadge',
      props: {
        badge: Object,
        remark: Boolean
      },
      data () {
        return {
        }
      },
      computed: {
        badges () {
          return this.badge
        },
        visible () {
          let obj = this.badge
          let show = false
          for (let key in obj) {
            if (key) {
              show = true
              break
            }
          }
          return show
        }
      },
      methods: {
        removeBadge () {
          this.$emit('removeBadge')
        }
      }
    }
</script>
<style lang="stylus" scoped>
@import "../../../../assets/common"
.badge
  display block
  padding 4px 0 0 10px
  height auto
  line-height 24px
  background #fafafa
  color #8d8d8d
  border-bottom 1px solid $cf-level5
  .label
    display block
    float left
    height 100%
    line-height 24px
  div
    display inline-block
  .badge_info
    display inline-block
    min-height 24px
    max-width 90%
    white-space nowrap
    margin 0 10px 0 4px
    padding 0 10px
    border-radius 12px
    background $c-bus-label
    color $cf-white
    overflow hidden
    text-overflow ellipsis
    cursor pointer
  .el-icon-close
    display inline-block
    height 20px
    margin -6px 10px 0 -10px
    padding 0 10px
    vertical-align middle
    color $c-pink
    cursor pointer
.badge_remark
  height 30px
  background #fff5d9
  color #ff9100
  line-height 30px
  padding-left 10px
  border-bottom 1px solid $cf-level5
</style>
